<template>
  <div class="dashboard-container">
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="companyName" label="公司名称">
        </el-table-column>
        <el-table-column prop="companyLog" label="公司logo">
          <div class="demo-image">
            <div class="block" v-for="fit in fits" :key="fit">
              <span class="demonstration">{{ fit }}</span>
              <el-image
                style="width: 100px; height: 100px"
                :src="url"
                :fit="fit"></el-image>
            </div>
          </div>
        </el-table-column>
        <el-table-column prop="companyDescription" label="公司描述">
        </el-table-column>
        <el-table-column prop="companyAddress" label="公司地址">
        </el-table-column>
        <el-table-column prop="companyEmail" label="公司邮箱">
        </el-table-column>
      </el-table>
    <!-- <img src="http://localhost:8080/1.png"> -->
    	<div class="echart" id="mychart" :style="myChartStyle"></div>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import echarts from 'echarts'
import {getAll} from '@/api/company.js';
import resize from '@/utils/resize'
import {saleCount} from '@/api/sale'

export default {
  data(){
    return{
        page: 1,
        limit: 3,
        tableData: [],
        count: 4,
        fits: [''],
        url: 'http://localhost:8080/1.png',
        xData: [], //横坐标
        yData: [], //数据
        radio:1,
        myChartStyle: { float: "left",
        width: "50%", height: "400px" ,
        color:"blue",borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2} //图表样式
    }
  },
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.getAllByLimit(1);
  },mounted() {
  	saleCount({'typeName':this.radio}).then((res)=>{
  		this.xData=res.data.x;
  		this.yData=res.data.y;
  		this.initEcharts(this.xData,this.yData);
  	})
  },
  methods: {
//分页查询所有
      getAllByLimit(val) { // 修改当前页所触发的函数
        return new Promise((resolve, reject) => {
          getAll({'limit': this.limit,'page': val}).then(response => {
            const {data,count} = response
            this.tableData = data;
            this.count = count;
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },initEcharts(x,y) {
      // 基本柱状图
      const option = {
      	tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
        xAxis: {
        	type: 'category',
          data: x
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: y,
            radius: '55%',
            color:"blue"
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"),null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    Onsubmit(){
    	saleCount({'typeName':this.radio}).then((res)=>{
  		this.xData=res.data.x;
  		this.yData=res.data.y;
  		this.initEcharts(this.xData,this.yData);
  	})
    }
    }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
